<template>
  <el-dialog
    width="1160px"
    :visible.sync="_visible"
    :mask-closable="false"
    scrollable
    append-to-body
  >
    <div class="search flex align-items">
      <div class="search--title">搜索范围</div>
      <el-input
        v-model="search.name"
        placeholder="品牌名称"
        icon="el-icon-search"
        clearable
        style="width: 150px"
        @on-enter="getList"
      />
      <el-button
        type="primary"
        class="search--btn"
      >
        搜索
      </el-button>
    </div>
    <div class="brand-list flex">
      <template v-for="item in list">
        <div
          :key="item.id"
          class="brand-item"
          @click="selectChange(item)"
        >
          <img :src="item.logo" />
          <div>{{ item.name }}</div>
          <i
            v-if="selectedId.includes(item.id)"
            class="el-icon-success brand-list--select"
          ></i>
        </div>
      </template>
    </div>
    <div slot="footer">
      <el-button @click="_visible = false">取消</el-button>
      <el-button
        type="primary"
        @click="confirmChange"
      >
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getBrandListData } from '@/api/items/category';
export default {
  name: 'BrandDialog',
  props: {
    visible: {
      type: Boolean,
      require: true,
    },
    data: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      list: [],
      search: {
        name: '',
      },
      selected: [],
    };
  },
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      },
    },
    // _selected: {
    //   get() {
    //     return this.selected;
    //   },
    //   set(val) {
    //     this.$emit('update:selected', val);
    //   },
    // },
    selectedId() {
      return this.selected.map((item) => item.id);
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.selected = JSON.parse(JSON.stringify(this.data));
      }
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      try {
        const { data } = await getBrandListData();
        this.list = data;
      } catch (error) {
        throw new Error(error);
      }
    },
    // 选择或者取消选择品牌
    selectChange(brand) {
      // 判断是否已经选中
      const index = this.selectedId.indexOf(brand.id);
      if (index !== -1) {
        this.selected.splice(index, 1);
      } else {
        this.selected.push({
          id: brand.id,
          name: brand.name,
          logo: brand.logo,
        });
      }
    },
    confirmChange() {
      this._visible = false;
      this.$emit('update:data', this.selected);
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  &--title {
    padding-right: 10px;
  }
  &--btn {
    margin-left: 10px;
  }
}
.brand-list {
  flex-wrap: wrap;
  margin-top: 20px;
  height: 710px;
  overflow: auto;
  .brand-item {
    width: 80px;
    text-align: center;
    margin: 16px;
    position: relative;
    cursor: pointer;
    img {
      width: 80px;
      height: 80px;
      display: block;
      border-radius: 100%;
    }
  }
  &--del {
    position: absolute;
    right: -10px;
    top: -10px;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 100%;
    color: black;
  }
  &--select {
    position: absolute;
    right: -6px;
    top: -6px;
    padding: 4px;
    color: red;
    font-size: 25px;
  }
}
</style>
